<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>封装一个简单的ajax</title>
  </head>
  <body>
    <!-- 
        定义一个sendAjax函数，对xhr的get请求进行封装：
            1、该函数接收两个参数：url（请求地址）、data（参数对象）
            2、该函数返回一个Promise实例
                （1）若ajax请求成功，则Promise实例成功，成功的value是返回的数据
                (2)若ajax请求失败，则Promise实例失败，失败的reason是错误提示
     -->
    <script>
      function sendAjax(url, data) {
        return new Promise((resolve, reject) => {
          // 实例xhr
          const xhr = new XMLHttpRequest()
          // 绑定监听
          let str = ''
          for (let key in data) {
            str += `${key}=${data[key]}&`
          }
          str = str.slice(0, -1)

          xhr.open('GET', url + '?' + str)
          xhr.responseType = 'json'
          xhr.send()

          xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
              if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response)
              } else {
                reject('error!!!')
              }
            }
          }
        })
      }

      const x = sendAjax('https://api.apiopen.top/api/getShortVideo?', {
        page: 0,
        size: 10,
      })
      x.then(
        (value) => {
          console.log(value)
        },
        (reason) => {
          console.log(reason)
        }
      )
    </script>
  </body>
</html>
